import React, { useState, useRef, useEffect } from 'react'
import './ParkingGuideSystem.scss'

const ParkingGuideSystem = () => {
  const canvasRef = useRef(null)
  const [guides, setGuides] = useState([])
  const [isDrawing, setIsDrawing] = useState(false)
  const [currentGuide, setCurrentGuide] = useState(null)

  // 初始化画布
  useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    redrawCanvas(ctx)
  }, [guides])

  // 绘制所有引导线
  const redrawCanvas = (ctx) => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)

    // 绘制车位底图
    drawParkingSlots(ctx)

    // 绘制所有引导线
    guides.forEach((guide) => {
      drawSingleGuide(ctx, guide)
    })

    // 绘制当前正在创建的引导线
    if (currentGuide) {
      drawSingleGuide(ctx, currentGuide)
    }
  }

  // 绘制单个引导线
  const drawSingleGuide = (ctx, { start, end, color = '#FF5722' }) => {
    ctx.beginPath()
    ctx.moveTo(start.x, start.y)
    ctx.lineTo(end.x, end.y)
    ctx.strokeStyle = color
    ctx.lineWidth = 3
    ctx.stroke()

    // 绘制起点标记
    drawControlPoint(ctx, start.x, start.y, '#4CAF50')

    // 绘制终点标记
    drawControlPoint(ctx, end.x, end.y, '#F44336')
  }

  // 绘制控制点
  const drawControlPoint = (ctx, x, y, color) => {
    ctx.beginPath()
    ctx.arc(x, y, 6, 0, Math.PI * 2)
    ctx.fillStyle = color
    ctx.fill()
    ctx.strokeStyle = '#fff'
    ctx.lineWidth = 2
    ctx.stroke()
  }

  // 绘制车位示意图
  const drawParkingSlots = (ctx) => {
    ctx.fillStyle = '#BDBDBD'
    // 绘制示例车位（实际项目应从props获取）
    for (let i = 0; i < 5; i++) {
      ctx.fillRect(50 + i * 80, 50, 60, 100)
      ctx.fillStyle = '#9E9E9E'
      ctx.fillText(`A${i + 1}`, 75 + i * 80, 110)
    }
  }

  // 鼠标事件处理
  const handleMouseDown = (e) => {
    const rect = canvasRef.current.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    setIsDrawing(true)
    setCurrentGuide({
      start: { x, y },
      end: { x, y },
    })
  }

  const handleMouseMove = (e) => {
    if (!isDrawing) return

    const rect = canvasRef.current.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    setCurrentGuide((prev) => ({
      ...prev,
      end: { x, y },
    }))
  }

  const handleMouseUp = () => {
    if (!isDrawing || !currentGuide) return

    setGuides([...guides, currentGuide])
    setIsDrawing(false)
    setCurrentGuide(null)
  }

  return (
    <div className="parking-guide-container">
      <h2>停车场引导线系统</h2>
      <div className="canvas-wrapper">
        <canvas
          ref={canvasRef}
          width={600}
          height={400}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
        />
      </div>
      <div className="guide-list">
        <h3>引导线列表 ({guides.length})</h3>
        <ul>
          {guides.map((guide, index) => (
            <li key={index}>
              引导线 {index + 1}: ({guide.start.x}, {guide.start.y}) → (
              {guide.end.x}, {guide.end.y})
              <button
                onClick={() => setGuides(guides.filter((_, i) => i !== index))}>
                删除
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default ParkingGuideSystem
